<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import {computed} from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'default', // default-默认 warn-警告 second-次要 general-一般 primary-重要 info-不显眼的
  },
  mode: {
    type: String,
    default: 'round', // round-圆形的 rect-方形
  },
  size: {
    type: String,
    default: 'default', // default-默认 small-小的
  },
  icon: String, // 图标,
  styles: {
    type: Object,
    default: () => ({})
  }
})
const clazz = computed(() => [
  `tag-container-type-${props.type}`,
  `tag-container-mode-${props.mode}`,
  `tag-container-size-${props.size}`
])
const styles = computed(() => {
  if (props.size === 'small' && props.icon) {
    return { paddingLeft: 0 }
  } else if (props.size === 'default' && props.icon) {
    return { paddingLeft: '16rpx' }
  }
  return {}
})
</script>

<template>
  <view class="tag-container" :class="clazz" :style="{...styles, ...props.styles}"><icon-simple v-if="props.icon" :name="props.icon" /><slot></slot></view>
</template>

<style scoped lang="scss">
.tag-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4rpx 0;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 600;
  line-height: 40rpx;
}
.tag-container-type-default {
  color: $kaoyan-color-9;
  background-color: $kaoyan-color-14;
}
.tag-container-type-warn {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-3;
}
.tag-container-type-second {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-5;
}
.tag-container-type-general {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-10;
}
.tag-container-type-primary {
  color: $kaoyan-color-14;
  background-color: $kaoyan-color-9;
}
.tag-container-type-info {
  color: $kaoyan-color-9;
  background-color: $kaoyan-color-12;
}
.tag-container-mode-round {
  border-radius: 100rpx;
}
.tag-container-mode-rect {
  border-radius: 16rpx;
}
.tag-container-size-default {
  padding: 4rpx 32rpx;
}
.tag-container-size-small {
  padding: 4rpx 16rpx;
}
</style>
